<script setup>
import baoyangItem from "@/components/serve/baoyangItem.vue";
import selectStore from "@/components/store/selectStore.vue";
import { Toast } from "vant";
import { ref, reactive, computed, watch, onMounted } from "vue";
import { useUserStore } from "@/stores/user.store.js";
import { useCommonStore } from "@/stores/common.store.js";
import { useRoute, useRouter } from "vue-router";
import api from "@/api/api";

//导入图片
import yibiaopan from "@/assets/home/yibiaopan.png"
import carIcon from "@/assets/serve/car.png"
import kefuIcon from "@/assets/serve/kefu.png"

// 使用Vue 3 Composition API
const route = useRoute();
const router = useRouter();
const store = useUserStore();
const commonStore = useCommonStore();
// 响应式数据
const active = ref(0);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const result = ref([]);
const storeId = ref(-1);
const showStore = ref(false);
const hasCar = ref(false);
const carInfo = ref({});
const id = ref("");
const pageInfo = ref({
  pageNum: 1,
  pageSize: 10,
});

// 从Vuex获取状态
const carList = computed(() => store.carList);
const currentCarIndex = computed(() => commonStore.currentCarIndex);

// 计算属性
const title = computed(() => {
  if (id.value === "1923192237742030850") {
    return "做保养";
  } else if (id.value === "1923197564654911489") {
    return "做钢圈";
  } else if (id.value === "1923197645038747649") {
    return "喷油漆";
  } else if (id.value === "1923197703956135937") {
    return "换电瓶";
  } else if (id.value === "1937056066775347202") {
    return "汽车美容";
  } else if (id.value === "1937056220047798274") {
    return "洗车";
  } else if (id.value === "1937056431138729985") {
    return "换轮胎";
  }
  return "";
});

// 监听器
watch(storeId, (val) => {
  active.value = 1;
});

// 方法
const onClickLeft = () => {
  router.back();
};

const onLoad = () => {
  getList();
};

const getList = async () => {
  let res = await api.common.getHomeGoods({
    categoryId: id.value,
    homePage: false,
    ...pageInfo.value,
  });
  loading.value = false;
  list.value = [...list.value, ...res.data].filter(
    (v) => v.id !== "1952191044194463746"
  );
  if (res.data.length <= pageInfo.value.pageSize) {
    finished.value = true;
  } else {
    pageInfo.value.pageNum++;
  }
};

const goChat = () => {
  router.push({
    path: "/chat",
  });
};

const choiceStore = () => {
  if (!result.value.length) {
    Toast.fail("请至少选择一个服务");
    return;
  }
  showStore.value = true;
};

const onBtnClick = () => {
  makeSureOrder();
};

const makeSureOrder = () => {
  // router.push({
  //   path: "/makeSure",
  // });
};

const back = () => {
  showStore.value = false;
};

const select = () => {
  showStore.value = false;
};

const goDetail = (v) => {
  router.push({
    path: "/serveDetail",
    query: {
      goodsId: v.id,
      type: 1,
    },
  });
};

// 生命周期钩子
onMounted(() => {
  id.value = route.query.id;
  if (carList.value.length) {
    hasCar.value = true;
    carInfo.value = carList.value[currentCarIndex.value];
  }
});
</script>
<template>
  <div class="baouyang_home">
    <van-nav-bar class="nav_bar" fixed :left-text="title" @click-left="onClickLeft">
      <template #right>
        <div class="nav_right">
          <span>车辆问题都可以问我哦~</span>
          <van-image class="right_icon" :src="kefuIcon" @click="goChat" />
        </div>
      </template>
    </van-nav-bar>
    <div v-if="!hasCar" class="no_car">
      <van-image class="no_car_icon" :src="carIcon" />
      <div class="no_car_btn">添加爱车</div>
    </div>
    <div v-else class="has_car">
      <span class="has_car_name">{{ carInfo.brand }}

      </span>
      <div class="has_car_distance">
        <van-image class="has_car_distance_icon" :src="yibiaopan" />
        <span class="distance">{{ carInfo.mileage || 0 }}</span>
        <span style="margin-right: 10px">KM</span>

      </div>
    </div>

    <div class="list">

      <div class="main">
        <van-list v-model="loading" :finished="finished" :finished-text="list.length > 0 ? '没有更多了' : ''" @load="onLoad">
          <baoyangItem v-for="(v, i) in list" :key="i" :item="v" @click.native="goDetail(v)"></baoyangItem>
        </van-list>
        <van-empty v-if="list.length == 0 && !loading" description="暂无商品" />
      </div>
    </div>
    <van-popup v-model="showStore" position="bottom" get-container=".baouyang_home">
      <div class="main">
        <selectStore v-model="storeId" @back="back" @select="select"></selectStore>
      </div>
    </van-popup>
  </div>
</template>


<style lang="less" scoped>
.baouyang_home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 130px 50px 150px 50px;
  background-color: #fff;
  position: relative;

  .nav_bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
    background-size: cover;
    background-position: top center;

    .nav_right {
      display: flex;
      align-items: center;
      font-size: 44px;
      color: #fff;

      .right_icon {
        width: 92px;
        height: 80px;
        margin-left: 20px;
      }
    }

    :deep(.van-nav-bar__text) {
      color: #fff;
      margin-left: 20px;
      font-size: 52px;
    }

    :deep(.van-icon) {
      font-size: 50px;
      font-weight: bold;
      color: #fff;
    }
  }

  :deep(.van-hairline--bottom::after) {
    border: unset;
  }

  .no_car,
  .has_car {
    margin-top: 55px;
    padding: 10px;
    background: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_icon {
      width: 85px;
      height: 85px;
    }

    &_btn {
      padding: 15px 50px;
      border-radius: 999px;
      font-size: 44px;
      color: #fff;
      text-align: center;
      background: linear-gradient(to right, #0160ea, #01bffa);
    }

    .has_car_name {
      font-size: 44px;
      color: #333;
      display: flex;
      align-items: center;

      .edit {
        font-size: 55px;
        color: #999;
      }
    }

    .has_car_distance {
      display: flex;
      align-items: center;
      font-size: 44px;
      color: #333;

      &_icon {
        width: 54px;
        height: 42px;
        margin-right: 15px;
      }
    }
  }

  .has_car {
    padding: 10px 30px;
  }

  .step {
    margin-top: 20px;

    :deep(.van-steps) {
      background: rgba(255, 255, 255, 0.3);

      .van-step--horizontal .van-step__circle-container {
        background: transparent;

        .van-step__circle {
          width: 45px;
          height: 45px;
          background: #f9a02e;
        }

        .van-step__icon {
          font-size: 60px;
        }

        .van-step__icon--active {
          color: #f9a02e;
        }
      }

      .van-step__line {
        background-color: #f9a02e;
      }

      .van-step__title {
        color: #fff;
      }

      .van-step__title--active {
        color: #fff;
        font-weight: bold;
      }
    }
  }

  .list {
    margin-top: 35px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    // background: #eef3ff;
    padding: 60px 30px;
    position: relative;
    overflow: hidden;

    .list_bg {
      position: absolute;
      top: 20px;
      right: -70px;
      width: 332px;
      height: 152px;
    }

    .list_title {
      font-size: 56px;
      color: #3a5899;
    }

    .list_tips {
      display: flex;
      align-items: center;
      font-size: 34px;
      color: #333333;

      .tips_icon {
        width: 55px;
        height: 61px;
        margin-right: 20px;
      }
    }

    .main {
      width: 100%;
      margin-top: 20px;

      :deep(.van-checkbox__label) {
        line-height: unset;
      }
    }
  }

  .bottom {
    position: fixed;
    padding: 25px 50px 100px 50px;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;

    .btn_container {
      width: 100%;
      display: flex;
      align-items: center;
      height: 145px;

      .left {
        flex-grow: 1;
        background: #538afe;
        height: 100%;
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
        display: flex;
        align-items: flex-start;
        padding: 20px 10px 20px 50px;
        box-sizing: border-box;

        .shop_car {
          width: 92px;
          height: 84px;
          margin-right: 10px;
        }

        .tips {
          font-size: 36px;
          color: #fff;
          text-align: center;
        }

        .price {
          margin-left: 10px;
          font-size: 48px;
          color: #ffd669;
        }
      }

      .middle {
        flex: 2;
        min-width: 70px;
        background: #3f4f7c;
        line-height: 145px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        font-size: 54px;
        padding: 0 10px;
      }

      .right {
        flex: 2;
        background: #3f4f7c;
        height: 100%;
        color: #fff;
        font-size: 54px;
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
        line-height: 145px;
        text-align: center;
        font-weight: bold;
      }

      .buy {
        min-width: 120px;
        background: linear-gradient(to right, #ff5f34, #ee0c26);
      }
    }
  }
}

:deep(.van-nav-bar__content) {
  margin: 50px 20px;
}

:deep(.van-list__finished-text) {
  font-size: 44px;
  padding: 50px;
}

:deep(.van-empty__image){
  width: 550px;
  height: 550px;
}

:deep(.van-empty__description){
  font-size: 44px;
}
</style>
